<script setup>
import { ref, onMounted, computed } from 'vue'
import { useUserStore } from '../../stores/user'
import axios from 'axios'

const userStore = useUserStore()
const salaryRecords = ref([])
const loading = ref(false)
const userId = computed(() => userStore.userInfo.id)

const statusMap = {
  PENDING: '待确认',
  CONFIRMED: '已确认',
  PAID: '已发放'
}
const formatStatus = (status) => statusMap[status] || status

const fetchMySalaryRecords = async () => {
  loading.value = true
  try {
    // 假设后端有 /salary/records?userId=xxx 或 /salary/records/my
    const res = await axios.get('/salary/records', {
      params: { userId: userId.value }
    })
    salaryRecords.value = res.data.records || res.data || []
  } catch (e) {
    salaryRecords.value = []
  } finally {
    loading.value = false
  }
}

const confirmSalary = async (recordId) => {
  try {
    await axios.post(`/salary/confirm/${recordId}`)
    await fetchMySalaryRecords()
  } catch (e) {
    alert('确认失败，请重试')
  }
}

onMounted(() => {
  fetchMySalaryRecords()
})
</script>

<template>
  <div class="payroll-container">
    <h2>我的薪资记录</h2>
    <el-table :data="salaryRecords" v-loading="loading" style="width: 100%">
      <el-table-column prop="year" label="年份" width="80" />
      <el-table-column prop="month" label="月份" width="80" />
      <el-table-column prop="baseSalary" label="基本工资" />
      <el-table-column prop="attendanceDeduction" label="考勤扣款" />
      <el-table-column prop="socialSecurity" label="社保" />
      <el-table-column prop="housingFund" label="公积金" />
      <el-table-column prop="tax" label="个税" />
      <el-table-column prop="totalSalary" label="应发工资" />
      <el-table-column prop="netSalary" label="实发工资" />
      <el-table-column
        prop="status"
        label="状态"
        :formatter="(row) => formatStatus(row.status)"
      />
      <el-table-column prop="remark" label="备注" />
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button v-if="row.status !== 'CONFIRMED'" type="primary" size="small" @click="confirmSalary(row.id)">
            确认
          </el-button>
          <span v-else>已确认</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.payroll-container {
  padding: 20px;
  background: #fff;
  min-height: 400px;
}
</style> 